<template>
  <div>
    <div class="title">工作台/粘贴广告列表</div>

    <el-tabs v-model="activeName" @tab-click="handleClick" stretch class="card">
      <el-tab-pane label="粘贴广告" name="first" style="height: 700px">
        <!-- 第一页   粘贴广告 -->
        <div class="box" style="height: 130px">
          <div class="box-title">
            <i class="el-icon-search"></i>
            <span>&nbsp; 筛选查询</span>
          </div>

          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            size="mini"
          >
            <el-form-item class="form-style">
              <el-input
                v-model="form.user"
                placeholder="输入姓名查询"
              ></el-input>
            </el-form-item>

            <el-form-item class="form-style">
              <el-date-picker
                type="date"
                placeholder="输入粘贴日期查询"
                v-model="form.date"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>

            <el-form-item class="form-style">
              <el-select v-model="form.region" placeholder="未粘贴">
                <el-option label="未粘贴" value="weizhantie"></el-option>
                <el-option label="已粘贴" value="yizhantie"></el-option>
                <el-option label="已拒绝" value="yijujue"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onCheck">查询</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-button type="primary" round class="btn" size="mini"
          >开始扫码</el-button
        >
        <el-button type="primary" round class="btn" size="mini"
          >结束扫码</el-button>

        <el-table :data="tableData" border class="tables" size="mini">
          <el-table-column prop="id" label="会员编号" width="130">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="120">
          </el-table-column>
          <el-table-column prop="identityCard" label="身份证" width="129">
          </el-table-column>

          <el-table-column prop="cartype" label="车辆类型" width="100">
          </el-table-column>

          <el-table-column prop="travelnum" label="行驶证号" width="120">
          </el-table-column>
          <el-table-column prop="datestop" label="证件到期时间" width="100">
          </el-table-column>
          <el-table-column prop="money" label="签约金额" width="100">
          </el-table-column>
          <el-table-column prop="timestop" label="签约有效期" width="100">
          </el-table-column>
          <el-table-column prop="pastetime" label="粘贴日期" width="100">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="100">
          </el-table-column>
          <el-table-column prop="person" label="审核人" width="100">
          </el-table-column>
          <el-table-column prop="operation" label="操作" width="100">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="签约金结算" name="second" style="height: 700px">
        <!-- 第二页  签约金结算 -->

        <div class="box">
          <div class="box-title">
            <i class="el-icon-search"></i>
            <span>&nbsp; 筛选查询</span>
          </div>

          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            size="mini"
          >
            <el-form-item class="form-style">
              <el-input
                v-model="form.user"
                placeholder="输入姓名查询"
              ></el-input>
            </el-form-item>

            <el-form-item class="form-style">
              <el-date-picker
                type="date"
                placeholder="输入结算日期查询"
                v-model="form.date"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>

            <el-form-item class="form-style">
              <el-select v-model="form.region" placeholder="未结算">
                <el-option label="未结算" value="weijiesuan"></el-option>
                <el-option label="已结算" value="yijiesuan"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onCheck">查询</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-table :data="tableData" border class="tables" size="mini">
          <el-table-column prop="id" label="会员编号" width="100">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="100">
          </el-table-column>
          <el-table-column prop="identityCard" label="身份证" width="100">
          </el-table-column>

          <el-table-column prop="cartype" label="车辆类型" width="100">
          </el-table-column>

          <el-table-column prop="travelnum" label="行驶证号" width="100">
          </el-table-column>
          <el-table-column prop="idstop" label="证件到期时间" width="100">
          </el-table-column>
          <el-table-column prop="pastetime" label="粘贴日期" width="100">
          </el-table-column>
          <el-table-column prop="money" label="签约金额" width="100">
          </el-table-column>
          <el-table-column prop="timestop" label="签约有效期" width="100">
          </el-table-column>

          <el-table-column prop="datestop" label="结算日期" width="100">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="100">
          </el-table-column>
          <el-table-column prop="person" label="审核人" width="100">
          </el-table-column>
          <el-table-column prop="operation" label="操作" width="99">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      form: {
        date: "",
        type: [],
        user: "",
        region: "",
      },

      // 表格
      tableData: [
        {
          id: "123",
          name: "hahha",
          phone: "123546",
          identityCard: "123456789",
          reason: "手机丢了",
          cartype: "车辆类型",
          travelnum: "车号",
          idstop: "2021",
          money: "qian",
          timestop: "2025",
          pastetime: "2022",
          state: "aa",
          person: "sdfs",
          operation: "",
          datestop: "jiesuanriqi",
        },
        {
          id: "123",
          name: "hahha",
          phone: "123546",
          identityCard: "123456789",
          reason: "手机丢了",
          cartype: "车辆类型",
          travelnum: "车号",
          idstop: "2021",
          money: "qian",
          timestop: "2025",
          pastetime: "2022",
          state: "aa",
          person: "sdfs",
          operation: "",
          datestop: "jiesuanriqi",
        },
      ],
    };
  },
  methods: {
    onCheck() {},
    onReset() {},
  },
};
</script>

<style scoped>
.title {
  text-align: left;
  padding-left: 200px;
  padding-top: 20px;
}
.box {
  width: 1400px;
  height: 160px;
  background: rgba(242, 242, 242, 1);
}
.box-title {
  float: left;
  margin: 20px 1000px 30px 150px;
  font-weight: 800;
}
.form-style {
  margin-right: 70px;
}

.tables {
  width: 1400px;
  margin-top: 10px;
}

.card {
  margin-left: 200px;

  width: 1400px;
}

.btn {
  float: left;
  margin: 10px;
}
</style>